<!-- 引入Vue -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
    
    <div @click="changeValue" style="cursor: pointer; color: red;">消息: {{msg}}</div>


    <el-dropdown>
      <span class="el-dropdown-link" style="cursor: pointer;">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu>
        <el-dropdown-item icon="el-icon-plus" >黄金糕</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
        <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
        <el-dropdown-item icon="el-icon-circle-check">蚵仔煎</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

</div>

<script>

var Main = {
    data() {
      return {
        value: "下拉菜单",
        msg: "hello world (注:可以点哦)"
      }
    },
    methods: {
        changeValue(val){
            this.value = val;
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            });
        }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

</script>